<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        :size="'default'"
        status-icon
    >
        <el-form-item label="批复类型" prop="reply_id">
            <el-select v-model="formData.reply_id" :clearable="true">
                <el-option
                    v-for="optValue in SelectOptionCntrOwnerReply"
                    :key="optValue.value"
                    :label="optValue.label"
                    :value="optValue.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="批复内容" prop="msg">
            <el-input v-model.trim="formData.msg" type="textarea" :rows="4" />
        </el-form-item>
    </el-form>
    <div class="btn-group">
        <el-button-group>
            <el-button
                class="btn"
                type="primary"
                v-debounce="onSave"
                size="large"
            >
                保存
            </el-button>
        </el-button-group>
    </div>
</template>
<script setup lang="ts" name="CntrReply">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { Request } from '@/app/request';
import type { CntrFixReplyModel } from '@/common/types/container';
import { useAppStore } from '@/store/app';
import { ValidateFieldsError } from 'async-validator';
const { SelectOptionCntrOwnerReply } = useAppStore();
const props = defineProps<{
    ids: number[];
}>();
const emit = defineEmits<{
    close: []
}>();
const formRef = ref<FormInstance>();
const formData = reactive<CntrFixReplyModel>({});
const rules = reactive<FormRules>({
    reply_id: [{ required: true, message: '请输入批复类型', trigger: 'blur' }],
    msg: [{ required: true, message: '请输入批复内容', trigger: 'blur' }],
});
const onSave = async () => {
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {
            // return isValid;
            return;
        },
    );

    if (formValid) {
        const req = new Request('箱修理报价批复', {
            ids: props.ids,
            reply_id: formData.reply_id,
            msg: formData.msg
        });
        const r = await req.post(); 
        if (r.code > 100) {
            emit('close');
        }
    }
};
</script>
<style lang="scss" scoped>
.btn-group {
    .btn {
        margin-right: 5px;
    }
}
</style>
